<template>
  <div :class="wrapClasses">
    <div :class="outerClasses">
      <div :class="innerClasses">
        <div :class="bgClasses" :style="bgStyle"></div>
      </div>
    </div>
    <span v-if="!hideInfo" :class="textClasses">
      <slot>
        <span v-if="isStatus" :class="textInnerClasses">
          <Icon :name="statusIcon"></Icon>
        </span>
        <!-- <span v-else :class="textInnerClasses">
          {{ percent }}%
        </span>  -->
        <span v-else :class="textInnerClasses">
          {{progressShowValue}}
        </span>
      </slot>
    </span>
  </div>
</template>
<script>
import Icon from '../Icon/Icon.vue';
import { oneOf } from '../../util/tools';

const prefixCls = 'h-progress';

export default {
  name:'Progress',
  components: { Icon },
  props: {
    percent: {
      type: Number,
      default: 0
    },
    status: {
      validator (value) {
          return oneOf(value, ['normal', 'active', 'wrong', 'success']);
      },
      default: 'normal'
    },
    hideInfo: {
      type: Boolean,
      default: false
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    vertical: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      validator (value) {
        // fraction 分数
        // percent 百分比
          return oneOf(value, ['percent', 'fraction']);
      },
      default: 'percent'
    },
    // 分子
    numerator: {
      type: [Number, String],
      default: 0
    },
    // 分母
    denominator: {
      type: [Number, String],
      default: 1
    }
  },
  data () {
    return {
      currentStatus: this.status,
      progressValue: 0,
      progressShowValue: ''
    };
  },
  computed: {
    isStatus () {
      return this.currentStatus == 'wrong' || this.currentStatus == 'success';
    },
    statusIcon () {
      let type = '';
      switch (this.currentStatus) {
        case 'wrong':
          type = 'delete_fill';
          break;
        case 'success':
          type = 'success_fill';
          break;
      }

      return type;
    },
    bgStyle () {
     return this.vertical ? {
          // height: `${this.percent}%`,
          height: `${this.progressValue}%`,
          width: `${this.strokeWidth}px`
      } : {
          // width: `${this.percent}%`,
          width: `${this.progressValue}%`,
          height: `${this.strokeWidth}px`
      };
    },
    wrapClasses () {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.currentStatus}`,
        {
          [`${prefixCls}-show-info`]: !this.hideInfo,
          [`${prefixCls}-vertical`]: this.vertical
        }
      ];
    },
    textClasses () {
      return `${prefixCls}-text`;
    },
    textInnerClasses () {
      return `${prefixCls}-text-inner`;
    },
    outerClasses () {
      return `${prefixCls}-outer`;
    },
    innerClasses () {
      return `${prefixCls}-inner`;
    },
    bgClasses () {
      return `${prefixCls}-bg`;
    }
  },
  created () {
    this.handleValue()
    this.handleStatus();
  },
  methods: {
    // 分百分比或者分子分母比显示，重新计算进度值
    handleValue () {
      if (this.showType == 'percent' && this.percent >= 0) {
        this.progressValue = this.percent
        this.progressShowValue = `${this.percent}%`
      } else if (this.showType == 'fraction' && parseInt(this.denominator) > 0 && parseInt(this.numerator) <= parseInt(this.denominator)) {
        this.progressValue = Number((parseInt(this.numerator) * 100) / parseInt(this.denominator)).toFixed(0)
        this.progressShowValue = `${this.numerator}`+ '/' + `${this.denominator}`
      } else {
        this.$hMessage.info('当前进度值输入不合法')
      }
    },
    handleStatus (isDown) {
      if (isDown) {
        this.currentStatus = 'normal';
        this.$emit('on-status-change', 'normal');
      } else {
        // if (parseInt(this.percent, 10) == 100) {
        if (parseInt(this.progressValue, 10) == 100) {
          this.currentStatus = 'success';
          this.$emit('on-status-change', 'success');
        }
      }
    }
  },
  watch: {
    // percent (val, oldVal) {
    //   if (val < oldVal) {
    //     this.handleStatus(true);
    //   } else {
    //     this.handleStatus();
    //   }
    // },
    percent () {
      this.handleValue()
    },
    numerator () {
      this.handleValue()
    },
    denominator () {
      this.handleValue()
    },
    progressValue (val, oldVal) {
      if (val < oldVal) {
        this.handleStatus(true);
      } else {
        this.handleStatus();
      }
    },
    status (val) {
      this.currentStatus = val;
    }
  }
};
</script>
